<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>class与style绑定</title>
	<style>
		.test{
			font-weight: bold;
		}
		.testa{
			color: red;
		}
		.testb{
			font-size: 20px;
		}
	</style>
	<script src="lib/js/vue.js"></script>
</head>
<body>
	<div id="example">
		<!-- 几种写法，不推荐class="{{ className }}"与v-bind:class混用 -->
		<p class="{{ className }}">This is a paragraph.</p>
		<p class="test" v-bind:class="{ 'testa': isA, 'testb': isB }">This is a paragraph.</p>		<!-- 常用于动态切换样式 -->
		<p :class="classObject">This is a paragraph.</p>
		<p :class="[classA, classB]">This is a paragraph.</p>
		<p :class="[classA, isB? classB : '']">This is a paragraph.</p>
	</div>
	

	<script>
		var vm = new Vue({
			el: "#example",
			data: {
				className: "testa",

				isA: false,
				isB: true,

				classObject: {
					'testa': true,
					'testb': false
				},

				classA: 'testa',
				classB: 'testb'
			}
		});
	</script>
</body>
</html>